<template>
	<div class="swiper two-swiper" >
		<ol class="two swiper-wrapper" >
			<li v-for="item in picture2" :key="item.id" class="swiper-slide">
				<router-link to="/">
					<img :src="item.url" />
					<p>{{item.title}}</p>
				</router-link>
			</li>
		</ol>
	</div>
</template>


<script>
	// 1引入vue周期函数
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Tabs',
		props:["propst"],
		data(){
			return{
				picture2:[],
			}
		},
		watch:{
			propst(){
				this.picture2=this.propst
			}
		},
		setup(){
			onMounted ( ()=> {
				new Swiper('.two-swiper',{
					slidesPerView : 5,
				})
			})
		}
		
		
	}
</script>

<style scoped="scoped">
	
	a{
		text-decoration: none;
		color: #000000;
	}
	
	.two{
		padding: 0.3rem 0;
		display: flex;
		text-align: center;
	}
	.two li{
		width: 20%;
		text-align: center;
	}
	.two img{
		width: 1rem;
		height: 1rem;
	}
	.two li p{
		padding: 0.15rem 0;
	}
	
</style>
